import React, { Component } from 'react';


class Demo extends Component{
state={}
static getDerivedStateFromProps(props,state){
  console.log(props)
  console.log('这里是demo中的getDrivedStateFromProps')
  return {
    ...props
  }
}
render(){
  return <h1>demo子组件</h1>
}

}


class App extends Component{
  state={
  }
  constructor(props){
    super(props)
    console.log('1执行App组件的constructor');
  }
  static getDerivedStateFromProps(props,state){
    console.log(props)
    console.log('2执行App组件的getDerivedStateFromProps');
    // return null;//表示不会和当前状态合并
    return {
      ...props,
      msg:"App中constructor的return出的msg"//添加状态到state

    }
  }
  render(){
    console.log('3.执行App组件的render');
    return (
      <div>
        <Demo msg={'这里会是在demo组件中的props'}></Demo>
        {/* demo组件中的props */}
      </div>
    )
  }
  componentDidMount(){
    console.log('4 执行App组件的componnentDidMount')
  }
}

export default App;
